import React, { Component } from 'react'

export default class Main extends Component {
  state = {
    content: '',
  }
  // 改变选中状态
  changeState = (id) => {
    this.props.changeStatus(id)
  }
  // 改变输入框的值
  onChange = () => {
    console.log(123)
  }
  // 删除
  deleteList = (id) => {
    this.props.deleteBtn(id)
  }
  render() {
    const { Array } = this.props
    return (
      <section className="main">
        <input
          onChange={(e) => this.props.selectAll(e)}
          id="toggle-all"
          className="toggle-all"
          checked={Array.every((item) => item.isDone)}
          type="checkbox"
        />
        <label htmlFor="toggle-all">Mark all as complete</label>
        <ul className="todo-list">
          {Array.map((item) => {
            return (
              <li
                key={item.id}
                className={[item.isDone ? 'completed' : ''].join(' ')}
              >
                <div className="view">
                  <input
                    className="toggle"
                    type="checkbox"
                    onChange={() => this.changeState(item.id)}
                    checked={[item.isDone ? 'checked' : ''].join(' ')}
                  />
                  <label>{item.name}</label>
                  <button
                    onClick={() => this.deleteList(item.id)}
                    className="destroy"
                  ></button>
                </div>
                <input
                  className="edit"
                  onChange={this.onChange}
                  onDoubleClick={this.changeValue}
                  value={this.state.content}
                />
              </li>
            )
          })}
          {/* <li className="completed">
            <div className="view">
              <input className="toggle" type="checkbox" checked />
              <label>Taste JavaScript</label>
              <button className="destroy"></button>
            </div>
            <input className="edit" value="Create a TodoMVC template" />
          </li>
          <li>
            <div className="view">
              <input className="toggle" type="checkbox" />
              <label>Buy a unicorn</label>
              <button className="destroy"></button>
            </div>
            <input className="edit" value="Rule the web" />
          </li> */}
        </ul>
      </section>
    )
  }
}
